﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="User-Settings.aspx.cs"
    Inherits="Paltop_v0._1.UI.User_Settings" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>User-Settings</title>
    <script src="../Scripts/JQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../Scripts/User-Settings/jquery.tools.min.js" type="text/javascript"></script>
    <link href="../Styles/User-Settings/User-Sttings.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server"   style="margin-top: -11px;">
    <%--Scripts--%>
    <script type="text/javascript">
        $(function () {
            $(".Tabs").tabs("div.Panes > div");
        });

        function closeMouseOver() {
            $('#closeIcon').attr("src", "../TemplateImages/FileManager/red_close.png");
        }

        function closeMouseOut() {
            $('#closeIcon').attr("src", "../TemplateImages/FileManager/blue_close.png");
        }
    </script>
    <!-- Profile picture -->
    <div class="TotalFrame">
        <div class="ProfilePic">
            <%--<img id="profilePic" src="../TemplateImages/User-Settings/Koala.jpg" />--%>
            <asp:Image CssClass="profilePic" ID="imgPicture" runat="server"  />
        </div>
        <!-- Close Icon -->
        
        <!-- Sidebar menu -->
        <div class="Sidebar">
            <ul>
                <li><a href="#">User information</a></li>
                <li><a href="#">Profile picture</a></li>
                <li><a href="#">Background settings</a></li>
                <li><a href="#">Change password</a></li>
            </ul>
        </div>
        <!-- Tabs -->
        <div class="Tabs">
            <ul class="Tabs">
                <li><a href="#">User information</a></li>
                <li><a href="#">Profile picture</a></li>
                <li><a href="#">Background settings</a></li>
                <li><a href="#">Change password</a></li>
            </ul>
        </div>
        <!-- Tab Panes (for the simple use) -->
        <div class="Panes">
            <!-- User information tab -->
            <div id="userInfo">
            Name:&nbsp&nbsp&nbsp&nbsp
                <asp:Literal ID="userName" runat="server"></asp:Literal>
                <asp:TextBox class="UserInfoInputs" ID="UserNameTextBox" runat="server"></asp:TextBox>
            <br /><br />
            Email:&nbsp&nbsp&nbsp&nbsp&nbsp
                <asp:Literal ID="email" runat="server"></asp:Literal>
                <asp:TextBox class="UserInfoInputs" ID="EmailTextBox" runat="server"></asp:TextBox>
                <br /><br />
            Country:&nbsp
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                <asp:TextBox class="UserInfoInputs" ID="CountryTextBox" runat="server"></asp:TextBox>
                <br /><br />
            Birthday:
                <asp:Literal ID="Literal2" runat="server"></asp:Literal>
                <asp:TextBox class="UserInfoInputs" ID="BirthdayTextBox" runat="server"></asp:TextBox>
                <asp:Label ID="Label1" runat="server" Text="like this : 01/11/2011"></asp:Label>
                <br /><br />
            Sex:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                <asp:Literal ID="Literal3" runat="server"></asp:Literal>
                <asp:TextBox class="UserInfoInputs" ID="SexTextBox" runat="server"></asp:TextBox>
                <br /><br />
                <asp:Button ID="AddInfoButton" runat="server" Text="Add information" OnClick="AddInfoBtn_Click" />

            </div>
            <!-- Profile picture tab -->
            <div id="profilePicPane">
                <h4>
                    Change your profile picture</h4>
                <br />
                
                <table>
                    <tr>
                        <td>
                            Upload a picture:&nbsp
                            <asp:FileUpload ID="uploadProfilePic" runat="server" />
                            <br />
                            The Uploaded picture  goes down here !
                        </td>
                        <td>
                            <asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>
                            <!-- This part should search the pictures in database  -->
                            <asp:Button ID="changeProfilePic" runat="server" Text="Upload" OnClick="UploadClick" />
                            <br />
                            The chosen picture goes down here !
                        </td>
                    </tr>
                </table>
                <br />
            </div>
            <!-- Background settings tab -->
            <div id="backGround">
            Current background picture:&nbsp
            <br />
            Change background picture:&nbsp
                <asp:FileUpload ID="FileUpload1" runat="server" style="margin-top: 180px;"/>
            </div>
            <!-- Change password tab -->
            <div id="changePassPane">
            
                <h4>
                    Change your password</h4>
                Password
                <br />
                <asp:TextBox ID="currentPass" runat="server"></asp:TextBox> <!-- class = "NewPass" -->
                <br />
                New password
                <br />
                <asp:TextBox ID="newPass" runat="server"></asp:TextBox> <!-- class = "NewPass" -->
                <br />
                Confirm new password
                <br />
                <asp:TextBox ID="confirmNewPass" runat="server"></asp:TextBox> <!-- class = "NewPass" -->
                <asp:Label ID="doesNotMatchMessage" runat="server" Text=""></asp:Label>
                <br />
                <asp:Button ID="changePassBtn" runat="server"  Text="Change password" OnClick="changePassBtn_Click" />
            </div>
        </div>
        <!-- AJAX tab panes -->
        <%--<div class="ajaxPanes"><div style="display:block"></div></div>--%>
    </div>
    </form>
</body>
</html>
